<template lang='pug'>
    transition(name='fade')
        div.themeContainer(v-show='isShow')
            div.hydrosTop
                span(class='iconfont icon-ziyuanxhdpi' @click='exit')
                p.title 主题帖
                div.topR 
                    span.floor 楼主
                    span(class='iconfont icon-shouye')
            bScroll.themeScroll(v-if='flag')
                div.themeContent(v-show='isShow')
                    div.person
                        img(v-lazy='obj.perImg' :key='obj.perImg')
                        div.personR
                            p.floorMan {{obj.name}}
                                span 楼主
                            p {{obj.time}}
                    h3.textTitle {{obj.title}}
                    p.text {{obj.text}}
                    img.textPic(v-lazy='obj.imgSrc' :key='obj.imgSrc')
                    ul.adviceList
                        li(v-for='item,index in obj.list' :key='item.id')
                            div.listL
                                img(v-lazy='item.perImg')
                                div.listMain
                                    p.adviceName {{item.name}}
                                    p.adviceTime 第{{index+1}}楼，{{item.time}}
                                    p.adviceText {{item.text}}
                            span.listR(class='iconfont icon-xiaoxi')
            ul.themeBtm
                li
                    span(class='iconfont icon-dianzan')
                    b {{obj.goodNum}}
                li
                    span(class='iconfont icon-xiaoxi')
                    b {{obj.list.length}}



</template>

<script>
    import bScroll from '../components/base/bScroll.vue'
    export default {
        props:['isShow','obj'],
        data() {
            return {
                flag: false
            }
        },
        components: {
            bScroll,
        },
        mounted(){
            setTimeout(()=>{
                this.flag = true
            },1000)
        },
        methods: {
            exit() {
                this.$emit('exit')
            }
        },
    }
</script>

<style lang="scss" scoped>
    .fade-enter,.fade-leave-to{
        transform:translateX(100vw);
    }
    .fade-enter-active,.fade-leave-active{
        transition:all 0.5s;
    }
    .themeBtm{
        position:fixed;
        bottom:0;
        left:0;
        display:flex;
        align-items: center;
        justify-content: space-around;
        width:100vw;
        height:1.1rem;
        background:#ecedef;
        li{
            height:1.1rem;
            span{
                font-size:0.42rem;
                color:#3867ab;
            }
            b{
                font-size:0.32rem;
                color:#000;
            }
        }

    }
    .themeContainer{
        width:100vw;
        height:100vh;
        position:absolute;
        left:0;
        top:0;
        z-index:999;
        background:#fff;
        overflow: hidden;
        .hydrosTop{
            height:0.86rem;
            background:#50c6f8;
            font-size:0.3rem;
            color:#fff;
            padding:0.2rem 0.3rem;
            display:flex;
            align-items:center;
            justify-content: space-between;
            span{
                font-size:0.42rem;
            }
            .topR{
                font-size:0.34rem;
                .floor{
                    margin-right:0.1rem;
                    display:inline-block;
                    width:0.55rem;
                    height:0.4rem;
                    line-height:0.4rem;
                    font-size:0.12rem;
                    text-align:center;
                    border:1px solid #fff;
                }
            }
        }
        .themeScroll{
            height:15rem;
            overflow:hidden;
            background:yellow;
            .themeContent{
                padding:0.23rem 0.2rem;
                // background:#fff;
                .person{
                    display:flex;
                    align-items:center;
                    margin-bottom:0.3rem;
                    img{
                        width:0.78rem;
                        height:0.78rem;
                        margin-right:0.1rem;
                    }
                    .personR{
                        height:0.78rem;
                        padding:0.08rem 0;
                        font-size:0.18rem;
                        color:#606060;
                        display:flex;
                        flex-direction: column;
                        justify-content: space-between;
                        .floorMan{
                            font-size:0.26rem;
                            color:#000;
                            span{
                                margin-left:0.2rem;
                                display:inline-block;
                                width:0.6rem;
                                height:0.3rem;
                                line-height:0.3rem;
                                font-size:0.16rem;
                                text-align:center;
                                background:#35a3f1;
                                color:#fff;
                                border-radius:0.04rem;
                            }
                        }
                    }
                }
                .textTitle{
                    line-height:0.5rem;
                    font-size:0.3rem;
                    color:#222222;
                }
                .text{
                    line-height:0.5rem;
                    font-size:0.3rem;
                    color:#7f7f7f;
                }
                .textPic{
                    width:100%;
                    // height:3.25rem;
                    margin-bottom:0.55rem;
                }
            }
            .adviceList{
                li{
                    padding:0.4rem 0.5rem;
                    display:flex;
                    justify-content: space-between;
                    background:#f4f4f2;
                    border-bottom:1px solid #e1e1e1;
                    .listL{
                        display:flex;
                        justify-content: space-between;
                        img{
                            width:0.28rem;
                            height:0.28rem;
                            margin-right:0.6rem;
                        }
                        .listMain{
                            .adviceName{
                                font-size:0.36rem;
                                color:#000;
                                margin-bottom:0.21rem;
                            }
                            .adviceTime{
                                font-size:0.32rem;
                                color:#9a9a98;
                                margin-bottom:0.37rem;
                            }
                            .adviceText{
                                font-size:0.37rem;
                                color:#000;
                            }
                        }
                    }
                    .listR{
                        font-size:0.58rem;
                        color:#000;
                    }
                }
            }
        }
        
    }
</style>